<div class="tlp-framed-horizontally">
    <section class="tlp-pane">
        <div class="tlp-pane-container">
            <div class="tlp-pane-header">
                <h1 class="tlp-pane-title"><i class="tlp-pane-title-icon fa fa-group"></i> {{# gettext }}Members{{/ gettext }} </h1>
            </div>
            <section class="tlp-pane-section">
                <div class="tlp-table-actions" id="project-admin-members-modal-buttons-section">
                    <form action="?group_id={{ project_id }}"
                          method="post"
                          class="project-admin-members-form"
                    >
                        {{# csrf_token }}
                            {{> csrf_token_input }}
                        {{/ csrf_token }}
                        <div class="tlp-form-element tlp-form-element-append">
                            <select
                                name="new_project_member"
                                id="project-admin-members-add-user-select"
                                class="tlp-select tlp-select-adjusted"
                                size="50"
                                required
                                data-placeholder="{{# gettext }}Member name{{/ gettext }}"
                            ></select>
                            <button class="tlp-append tlp-button-primary">
                                <i class="fa fa-plus tlp-button-icon"></i> {{# gettext }}Add member{{/ gettext }}
                            </button>
                        </div>
                        <input type="hidden" name="action" value="add-user">
                    </form>
                    <button id="project-admin-members-modal-import-users-button"
                            type="button"
                            data-target-modal-id="modal-import-users"
                            data-target-user-locale="{{ user_locale }}"
                            class="tlp-button-primary tlp-button-outline"
                    >
                        <i class="fa fa-upload tlp-button-icon"></i> {{# gettext }}Import members{{/ gettext }}
                    </button>
                    {{# additional_modals }}
                        {{# modals_buttons }}
                            {{{ purified_html_button }}}
                        {{/ modals_buttons }}
                    {{/ additional_modals }}
                    <div class="tlp-table-actions-spacer"></div>
                    <div class="tlp-form-element tlp-table-actions-element">
                        <input type="search"
                               class="tlp-search tlp-table-actions-filter"
                               id="project-admin-members-list-filter-table"
                               data-target-table-id="project-admin-members-list"
                               autocomplete="off"
                               placeholder="{{# gettext }}Filter by name{{/ gettext }}">
                    </div>
                </div>
                <table class="tlp-table" id="project-admin-members-list">
                    <thead>
                        <tr>
                            <th>{{# gettext }}Name{{/ gettext }}</th>
                            {{# can_see_ugroups }}
                                <th>{{# gettext }}Members of user groups{{/gettext}}</th>
                            {{/ can_see_ugroups }}
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="tlp-table-empty-filter">
                            <td colspan="{{# can_see_ugroups }}3{{/ can_see_ugroups }}{{^ can_see_ugroups }}2{{/ can_see_ugroups }}"
                                class="tlp-table-cell-empty"
                            >
                                {{# gettext }}There isn't any matching members{{/ gettext }}
                            </td>
                        </tr>
                        {{# project_members_list }}
                            <tr>
                                <td class="tlp-table-cell-filterable project-admin-members-username-column">
                                    <div class="tlp-avatar projectadmin-userlist-result-name-avatar">
                                        {{# has_avatar }}
                                            <img src="/users/{{ user_name }}/avatar.png" />
                                        {{/ has_avatar }}
                                    </div>
                                    <a href="{{ profile_page_url }}">{{ username_display }}</a>
                                </td>
                                {{# can_see_ugroups }}
                                    <td class="project-admin-members-ugroups">
                                        {{# ugroups }}
                                            <a href="/project/admin/editugroup.php?group_id={{ project_id }}&ugroup_id={{ id }}"
                                                {{# description }}
                                                    class="tlp-tooltip tlp-tooltip-bottom"
                                                    data-tlp-tooltip="{{ description }}"
                                                {{/ description }}
                                            >{{ name }}</a><span class="projectadmin-userlist-result-ugroup-separator">, </span>
                                        {{/ ugroups }}
                                    </td>
                                {{/ can_see_ugroups }}
                                <td class="tlp-table-cell-actions">
                                    {{# is_generic }}
                                        <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline"
                                            href="/project/admin/editgenericmember.php?group_id={{ project_id }}"
                                        >
                                            <i class="fa fa-pencil tlp-button-icon"></i>
                                            {{# gettext }}Edit settings{{/ gettext }}
                                        </a>
                                    {{/ is_generic }}
                                    <button type="submit"
                                            data-target-modal-id="project-admin-members-remove"
                                            data-user-id="{{ user_id }}"
                                            data-name="{{ username_display }}"
                                            class="tlp-table-cell-actions-button
                                                   tlp-button-danger
                                                   tlp-button-small
                                                   tlp-button-outline
                                                   {{# is_project_admin }}
                                                       tlp-tooltip
                                                       tlp-tooltip-left
                                                   {{/ is_project_admin }}
                                                   project-members-delete-button
                                            "
                                            {{# is_project_admin }}
                                                disabled
                                                data-tlp-tooltip="{{# gettext }}Project admins can't be removed from project. You must remove them from Project administrators group first.{{/ gettext }}"
                                            {{/ is_project_admin }}
                                    >
                                        <i class="fa fa-trash-o tlp-button-icon"></i>
                                        {{# gettext }}Remove from project{{/ gettext }}
                                    </button>
                                </td>
                            </tr>
                        {{/ project_members_list }}
                    </tbody>
                </table>
            </section>
        </div>
    </section>
</div>

{{> project-members-delete-modal }}

{{> modal-import-members }}

{{# additional_modals }}
    {{# modals_content }}
        {{{ purified_html_modal }}}
    {{/ modals_content }}
{{/ additional_modals }}
